<template>
	<view class="content">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<!-- f1;自定义导航栏 -->
		<uni-nav-bar
			class="nav-bar"
			left-icon="back"
			right-icon="list"
			left-text="返回"
			title="缴费"
			backgroundColor="#090"
			color="#fff"
			@clickLeft="back"
			@clickRight="jump('/pages/feeRecord/feeRecord')"
		></uni-nav-bar>
		<!-- f2:缴费类型金额-->
		<uni-list class="list-amount">
			<uni-list-item :title="type | feeTypeName" :thumb="type | feeTypeIcon" thumbSize="lg">
				<template v-slot:footer>
					<view class="footer-amount">
						<input type="digit" v-model="amount" placeholder="请输入缴费金额" />
						<text>元</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- f3缴费详情 -->
		<uni-list class="list-details">
			<uni-list-item
				title="缴费单位"
				:rightText="curCollector === -1 ? '请选择' : collectors[curCollector].cname"
				showArrow
				clickable
				@click="$refs.popup.open('center')"
			></uni-list-item>
			<uni-list-item title="用户编号" class="UserNo">
				<template v-slot:footer>
					<view class="footer-UserNo"><input type="text" v-model="userId" placeholder="请输入用户编号" @input="doUserIdChange" /></view>
				</template>
			</uni-list-item>
			<uni-list-item title="户  名" :rightText="ishouseholdQuery.householdName"></uni-list-item>
			<uni-list-item title="用户住址" :rightText="ishouseholdQuery.householdAddr"></uni-list-item>
		</uni-list>
		<!-- f4提交按钮 -->
		<view class="btn"><button @click="submitPay">立即缴费</button></view>
		<!-- f5弹出框 -->
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="popup-content">
				<view class="popup-header"><text>缴费单位</text></view>
				<view class="popup-body">
					<radio-group class="radio-group" @change="tmpCollector = $event.detail.value">
						<label class="radio-item" v-for="(item, i) in collectors" :key="item.cid">
							<text class="text">{{ item.cname }}</text>
							<radio :value="String(i)" :checked="i == curCollector ? true : false"></radio>
						</label>
					</radio-group>
				</view>
				<view class="popup-footer">
					<button @click="chooseCollector">确定</button>
					<button @click="$refs.popup.close()">取消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
// 当 direction 属性为 row 时表示水平排列，此时 header 表示列表的左边部分，body 表示列表的中间部分，footer 表示列表的右边部分
//当 direction 属性为 column 时表示垂直排列，此时 header 表示列表的上边部分，body 表示列表的中间部分，footer 表示列表的下边部分 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
import { feeCollector, householdQuery, feeAdd } from '../../service/index.js';
export default {
	data() {
		return {
			type: 1,
			collectors: [], //费用收缴单位列表
			curCollector: -1, //当前选中的缴费单位下标
			tmpCollector: -1, //临时选中尚未点击确定的缴费单位下标
			userId: '',
			requstTime: null,
			ishouseholdQuery: {},
			amount: ''
		};
	},
	async onLoad({ type }) {
		// console.log('解构上一页面传递来路由参数：', type);
		//没有通过“物业缴费”跳转过来，请求参数中没有携带type，则强行跳转(销毁跳转)到“物业缴费”页面
		if (!type) {
			uni.redirectTo({
				url: '/pages/property-fee/property-fee'
			});
		} else {
			this.type = type;
			let data = await feeCollector(this.type);
			this.collectors = data;
		}
	},
	methods: {
		back() {
			uni.navigateTo({
				url: '/pages/property-fee/property-fee'
			});
		},
		jump(url) {
			// console.log(url);
			uni.navigateTo({
				url
			});
		},
		chooseCollector() {
			this.curCollector = this.tmpCollector;
			this.$refs.popup.close();
		},
		async doUserIdChange() {
			if (this.requstTime) {
				clearTimeout(this.requstTime);
				this.requstTime = null;
			}
			this.requstTime = setTimeout(async () => {
				let data2 = await householdQuery(this.userId);
				if (data2.code === 2000) {
					this.ishouseholdQuery = data2.msg;
				} else {
					uni.showToast({
						title: '业主编号不存在',
						icon: 'error',
						duration: 2000
					});
					this.ishouseholdQuery = {};
				}
			}, 2000);
		},
		async submitPay() {
			let type = this.type; //缴费类型
			let collector = this.collectors[this.curCollector]; //缴费公司
			// console.log(collector);
			let householdId = this.ishouseholdQuery.householdId; //业主编号
			let amount = this.amount; //金额
			if (!type) {
				uni.showToast({ title: '缴费类型为空!', icon: 'none' });
				return;
			}
			if (!collector) {
				uni.showToast({ title: '缴费单位!', icon: 'none' });
				return;
			}
			if (!householdId) {
				uni.showToast({ title: '业主编号为空!', icon: 'none' });
				return;
			}
			if (!amount) {
				uni.showToast({ title: '金额为空!', icon: 'none' });
				return;
			}
			let data = await feeAdd(type, collector.cid, householdId, amount);
			if (data.code === 2000) {
				uni.showToast({
					title: '缴费成功'
				});
				this.amount = '';
				this.userId = '';
				this.ishouseholdQuery = {};
			} else {
				uni.showToast({
					title: '缴费失败'
				});
			}
		}
	}
};
</script>

<style lang="scss">
// https://uniapp.dcloud.net.cn/collocation/pages.html#customnav 解决了导航栏问题
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: $zh-theme-color;
}
.nav-bar {
	display: block;

	::v-deep .uni-navbar__content {
		display: block;
	}
}
.list-amount {
	margin-top: $uni-spacing-col-base;
	.footer-amount {
		font-size: $uni-font-size-base;
		align-items: center;
		input {
			font-size: $uni-font-size-base;
			width: 8em;
			text-align: center;
		}
	}
}
.list-details {
	margin-top: $uni-spacing-col-base;
}
.UserNo {
	.footer-UserNo {
		text-align: center;
		// padding-right: $uni-spacing-row-lg * 1.2;
		input {
			width: 9em;
			font-size: $uni-font-size-base;
		}
	}
}
.btn {
	padding: $uni-spacing-col-lg * 4 $uni-spacing-row-lg;
	button {
		background-color: $zh-theme-color;
		width: 100%;
		font-size: $uni-font-size-base;
		color: $uni-text-color-inverse;
		&:active {
			background-color: darken($zh-theme-color, 5%);
		}
	}
}
.popup-content {
	width: 600rpx;
	flex-direction: column;
	// background-color: $uni-bg-color;

	.popup-header {
		justify-content: center;
		padding: $uni-spacing-col-base 0;
		font-size: $uni-font-size-lg;
		background-color: $zh-theme-color;
		color: $uni-text-color-inverse;
		border-top-left-radius: $uni-border-radius-lg * 2;
		border-top-right-radius: $uni-border-radius-lg * 2;
	}
	.popup-body {
		background-color: $uni-bg-color;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		.radio-group {
			display: flex;
			flex-direction: column;
			width: 100%;
			.radio-item {
				display: flex;
				width: 100%;
				flex-direction: row;
				padding: $uni-spacing-col-base;
				border-bottom: 1px solid #f2f2f2;
				text {
					flex: 1;
				}
			}
		}
	}
	.popup-footer {
		background-color: $uni-bg-color;
		box-shadow: 0 0 16rpx $uni-border-color;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		button {
			font-size: $uni-font-size-base;
		}
	}
}
</style>
